<template>

<VGH/>
  <!-- 头部轮播图 -->
  <div class="swiperTab-container">
    <!-- 导航栏 -->
    <van-nav-bar title="值得买" class="navBar">
      <template #left>
        <van-icon @click="toHome" name="home-o" size="25" style="color: black; padding-top: 10px" />
      </template>

      <template #right>
        <van-icon name="search" size="25" @click="toSearch" style="color: black; padding-right: 15px; padding-top: 10px">
        </van-icon>
        <van-icon @click="toCart" name="cart-o" size="25" style="color: black; padding-top: 10px" />
      </template>
    </van-nav-bar>

    <div class="swiperTab-title">
      <!-- 值得买 -->
      <div class="deserve">
        <img class="deserve-img" src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="" />
        <p class="deserve-text">严选好物&nbsp;用心生活</p>
      </div>

      <!-- 轮播图 -->
      <v-card class="swiper" v-if="DeserveSwiper.length">
        <van-swipe
          @drag-end="changeSlide"
          :loop="false"
          :width="90"
          class="vanswiper"
          duration="500"
          indicator-color="limegreen"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(item, index) in newDeserveSwiper" :key="index">
            <div v-for="(swiper, index) in item" :key="index">
              <a :href="swiper.columnUrl">
                <div class="img">
                  <img class="swipe-item" :src="swiper.picUrl" alt="" />
                </div>

                <div class="intro">
                  <p class="item1">{{ swiper.mainTitle }}</p>
                  <span class="item2">{{ swiper.viceTitle }}</span>
                </div>
              </a>
            </div>
          </van-swipe-item>
        </van-swipe>

        <!-- 小圆点 -->
        <div class="dots">
          <span v-for="index in newDeserveSwiper.length - 3" :key="index" :class="currentIndex === index ? 'active' : ''"> </span>
        </div>
      </v-card>
    </div>
  </div>

  <!-- 瀑布流 -->
  <div class="water">
    <van-list @load="onLoad" offset="200">
      <div class="Waterfal" v-if="WaterfalList.length">
        <div 
            class="guanhao" 
            v-for="item in WaterfalList"
            v-masonry item-selector=".item" 
            transition-duration="0.4s"
          >
          <div v-masonry-tile class="item" v-for="(Waterfal, index) in item.topics" :key="index">
            <a 
            style="text-decoration: none; 
            color: black" 
            :href="`https://m.you.163.com${Waterfal.schemeUrl}`">
              
              <div class="WaterImg">
                <img :src="Waterfal.picUrl" alt="" />
                <!-- 文案 -->
                <p class="fontzize">{{ Waterfal.subTitle }}</p>

                <!-- 底部区域 -->
                <div class="lookDesc">
                  <div class="wenan-footer">
                    <img class="userImg" :src="Waterfal.avatar" alt="" />
                    <p class="userName">{{ Waterfal.nickname }}</p>
                  </div>

                  <!-- 小眼睛区域 -->
                  <div class="upArea">
                    <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="" />
                    <p class="uptext">{{ Waterfal.readCount }}</p>
                  </div>
                </div>
              </div>

            </a>
          </div>
        </div>
      </div>
    </van-list>
  </div>


</template>

<script lang="ts" setup>
import router from '@/router'
import { throttle } from 'lodash'
import { computed, onMounted, ref } from 'vue'
import { reqDeserveSwiper, reqWaterfal } from '@/api/deseverSwiper'


// 值得轮播图数据
const DeserveSwiper = ref<any[]>([])

// 瀑布流数据
const WaterfalList = ref<any[]>([])

// 轮播图小圆点
const currentIndex = ref(1)

// 定义获取瀑布流请求参数
const params = ref({
  page: 1,
  // 要实现上拉加载更多size每次大小为2
  size: 2
})

// 获取值得买轮播的数据
const getDeserveSwiper = async () => {
  // 调用获取轮播图数据API
  const res = await reqDeserveSwiper()
  // console.log(res.data.navList)
  if (res.code === '200') {
    DeserveSwiper.value = res.data.navList
  }
}

// 获取瀑布流数据
const getWaterfalList = async () => {
  // 解构
  const { page, size } = params.value
  const response = await reqWaterfal(page, size)
  if (response.code === '200') {
    // console.log(response.data.result[1].topics[1].picUrl)
    console.log(response.data)
    // 将请求回来的瀑布流数据赋值

    //@ts-ignore  下拉刷新,拼接上一页数据
    WaterfalList.value = [...WaterfalList.value, ...response.data.result]
  }
}

// 跳到首页
const toHome = () => {
  router.push('/home')
}

// 跳购物车
const toCart = () => {
  router.push('/cart')
}

// 跳去搜索页
const toSearch = () => {
  router.push('/toSearch')
}

// 滑动轮播图
const changeSlide = (event: any) => {
  // 小圆点
  currentIndex.value = event.index + 1
}

// 上拉加载更多
const onLoad = throttle(() => {
  // 上拉 每页数据+1
  params.value.page += 1
  // 调用获取瀑布流数据
  getWaterfalList()
}, 1000)

onMounted(() => {
  // 调用获取值得买轮播的数据方法
  getDeserveSwiper()

  // 调用获取瀑布流数据
  getWaterfalList()
})

// 利用计算属性 将数据分成两份
const newDeserveSwiper = computed(() => {
  // 定义一个空数组
  let arr: any = []
  // 先截取 数据的一般，然后 push到新数组中，arr[[1],[2],[3]]
  for (let i = 0; i < DeserveSwiper.value.length / 2; i++) {
    arr.push([DeserveSwiper.value[i]])
  }
  // 将剩余数据截取 后一半数据 添加到2维数组中，在push arr[[1,4],[2,5],[3,6]]
  DeserveSwiper.value.slice(DeserveSwiper.value.length / 2).forEach((item: any, index: any) => {
    arr[index].push(item)
  })
  return arr
})


</script>

<script lang="ts">
export default {
  name: 'WidthBuy'
}
</script>

<style lang="scss" scoped>
.swiperTab-container {
  width: 370px;
  height: 370px;
  position: relative;
  .navBar {
    position: fixed;
    top: 0px;
    z-index: 100;
    width: 100%;
  }
  .swiperTab-title {
    width: 370px;
    height: 220px;
    position: relative;
    background-image: url(http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView);
    float: left;
    z-index: 99;
    margin-top: 40px;
    .deserve {
      display: flex;
      justify-content: flex-start;
      position: absolute;
      .deserve-img {
        display: block;
        width: 70px;
        height: 37px;
        padding: 30px 5px;
      }
      .deserve-text {
        width: 130px;
        height: 24px;
        font-size: 15px;
        color: white;
        padding-top: 30px;
      }

      .deserve-bg {
        width: 370px;
        height: 150px;
        top: 30px;
        position: absolute;
      }
    }
  }

  .swiper {
    width: 350px;
    height: 290px;
    position: absolute;
    border-radius: 10px 10px 10px 10px;
    background-color: rgb(254, 251, 251);
    margin-top: 70px;
    margin-left: 10px;
    .vanswiper {
      width: 360px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: content-box;
      text-align: center;
      margin-top: 10px;
      a {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        width: 88px;
        img {
          display: block;
          width: 60px;
          height: 60px;
          margin-right: 5px;
          margin-top: 10px;
        }
        .intro {
          width: 84px;
          margin: auto;
          p {
            font-size: 15px;
            color: black;
            margin-top: 10px;
            margin-bottom: 10px;
          }
          span {
            display: block;
            font-size: 12px;
            color: gray;
            margin-top: -10px;
            padding-bottom: 10px;
          }
        }
      }
    }

    // 轮播图小圆点
    .dots {
      display: flex;
      justify-content: center;
    }

    .dots span {
      width: 20px;
      height: 2px;
      border-radius: 3px 3px 3px 3px;
      margin: 6px 1px;
      background-color: gray;
    }

    .dots span.active {
      background-color: rgb(221, 111, 68);
    }
  }
}

.van-safe-area-bottom {
  width: 100%;
}
.water {
  width: 375px;
  margin-top: 60px;

  // 瀑布流
  .Waterfal {
    width: 370px;
    height: 100%;
    .guanhao {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        display: inline-block;
        .WaterImg {
          width: 170px;
          margin-left: 8px;
          background-color: rgb(243, 241, 241);
          border-radius: 10px 10px 10px 10px;
          margin-bottom: 30px;
          img {
            width: 170px;
            border-radius: 14px;
          }
          .fontzize {
            font-size: 14px;
            color: #333333;
            margin: 5px 10px;
          }
          .lookDesc {
            display: flex;
            .wenan-footer {
              display: flex;
              flex-direction: row;
              margin: 10px 13px;
              .userImg {
                display: block;
                width: 24px;
              }
              .userName {
                color: #7f7f7f;
                font-size: 12px;
                margin: 5px;
              }
            }

            .upArea {
              width: 60px;
              img {
                width: 16px;
                padding-top: 12px;
              }
              .uptext {
                font-size: 12px;
                float: right;
                padding-top: 3px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
